<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
		v-if="!agentLineLiquidationDialog"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="100px"
				class="flex-warp-container"
			>
				<el-form-item
					:label="`${$t('agent.liquidation_time')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-date-picker
						v-model="searchTime"
						size="medium"
						align="right"
						:picker-options="pickerOptions"
						type="datetimerange"
						format="yyyy-MM-dd"
						range-separator="-"
						:start-placeholder="$t('common.start_time')"
						:end-placeholder="$t('common.end_time')"
						clearable
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item class="flex-row-container">
					<el-input
						v-model="queryData.inputValue"
						class="input-with-select"
						:placeholder="$t('common.please_enter')"
						clearable
						size="medium"
						@input="forceUpdate"
					>
						<el-select
							slot="prepend"
							v-model="queryData.inputType"
							width="110px"
							style="width:110px"
							:placeholder="$t('common.please_choose')"
						>
							<el-option
								:label="$t('funds.proxy_name')"
								:value="1"
							></el-option>
							<el-option
								:label="$t('funds.fund_audit.parent_proxy_account')"
								:value="2"
							></el-option>
							<el-option
								:label="
									$t('funds.fund_audit.belong_general_agent')
								"
								:value="3"
							></el-option>
						</el-select>
					</el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.updateBy')}:`"
					class="flex-row-container"
					label-width="61px"
				>
					<el-input
						v-model="queryData.updatedBy"
						v-symbols
						clearable
						size="medium"
						:placeholder="`${$t('common.please_enter')}`"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('agent.recycle_model')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.recycleMode"
						size="medium"
						:placeholder="$t('common.select_all')"
						clearable
						collapse-tags
					>
						<el-option
							:label="$t('common.all')"
							:value="undefined"
						></el-option>
						<el-option
							v-for="(item,index) in recycleModelTypeArr"
							:key="index"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<ReportDetailTable
				:tableDataColumn="tableDataColumn"
				:tableDataList="tableData"
				:tableLoading="loading"
				:tableHeight="tableHeight"
			>
				<template v-slot:actionSlot="{ rowData }">
					<el-button
						v-if="hasPermission('90870160')"
						type="primary"
						size="medium"
						@click="openLiquidationDetail(rowData)"
					>
						{{ $t('common.check_detail') }}
					</el-button>
				</template>
			</ReportDetailTable>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
	</main-content>
	<DetailPage
		v-else
		:rowVal="rowVal"
		@goBack="goBack">
	</DetailPage>
</template>

<script>
import dayjs from 'dayjs'
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
import { getColumns } from './components/columns'
const start1 = () => {
	return dayjs()
		.startOf('day')
		.valueOf()
}
const end1 = () => {
	return dayjs()
		.endOf('day')
		.valueOf()
}
export default {
	name: routerNames.agentLineLiquidationBill,
	components: {
		MainContent,
		ReportDetailTable: () => import('@/components/ReportDetailTable'),
		DetailPage: () => import('./components/detail-page.vue')
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				inputType: 1
			},
			tableData: [],
			tableDataColumn: [],
			searchTime: [],
			changeTypeArr: [],
			total: 0,
			agentLineLiquidationDialog: false,
			rowVal: {}
		}
	},
	computed: {
		recycleModelTypeArr() {
			return this.globalDics.recycleModelTypeArr || []
		}
	},
	created() {
	},
	mounted() {
		this.tableDataColumn = getColumns()
	},
	methods: {
		goBack() {
			this.agentLineLiquidationDialog = false
			this.loadData()
		},
		forceUpdate(value) {
			this.$forceUpdate()
			this.queryData.inputValue = this.queryData.inputValue.replace(
				/[^A-Za-z0-9]/g,
				''
			)
		},
		openLiquidationDetail(val) {
			this.agentLineLiquidationDialog = true
			this.rowVal = val
		},
		loadData() {
			this.loading = true
			const create = this.searchTime || []
			const [startTime, endTime] = create
			let params = {
				...this.queryData,
				startTime: startTime ? dayjs(startTime).format('YYYY-MM-DD') : undefined,
				endTime: endTime ? dayjs(endTime).format('YYYY-MM-DD') : undefined
			}
			params = {
				...this.getParams(params)
			}
			if (params.inputType === 1) {
				params.proxyAccount = params.inputValue || undefined
				params.directProxyAccount = undefined
				params.topProxyAccount = undefined
			} else if (params.inputType === 2) {
				params.proxyAccount = undefined
				params.directProxyAccount = params.inputValue || undefined
				params.topProxyAccount = undefined
			} else {
				params.proxyAccount = undefined
				params.directProxyAccount = undefined
				params.topProxyAccount = params.inputValue || undefined
			}
			delete params.inputValue
			delete params.inputType
			this.tableData = []
			let _self = this
			this.$api
				.getProxyLiduidationList(params)
				.then((res) => {
					_self.loading = false
					if (res?.code === 200) {
						const { records, total } = res.data || {}
						_self.tableData = Array.isArray(records)
							? Object.freeze(records)
							: []
						_self.total = total || 0
					}
				})
				.catch(() => {
					_self.loading = false
				})
		},
		reset() {
			this.searchTime = []
			this.queryData = {
				inputType: 1
			}
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped></style>
